import LottieView from 'lottie-react-native';
import React from 'react';
import { ViewProps } from 'react-native';
import { useAppTheme } from 'tsun-smart-ui';

type WiFiAnimationProps = {} & ViewProps;

const WiFiAnimation: React.FC<WiFiAnimationProps> = (props) => {
  const appTheme = useAppTheme();
  const normalColor = appTheme.colors?.brand?.primaryDisabled ?? '#000';
  const activeColor = appTheme.colors?.brand?.onPrimary ?? '#000';
  return (
    <>
      <LottieView
        style={{
          backgroundColor: 'transparent',
        }}
        {...props}
        source={require('@/assets/lottie/wifi.json')}
        autoPlay
        loop
        colorFilters={[
          {
            keypath: '1浅色',
            color: normalColor,
          },
          {
            keypath: '2浅色',
            color: normalColor,
          },
          {
            keypath: '3浅色',
            color: normalColor,
          },
          {
            keypath: '4浅色',
            color: normalColor,
          },
          {
            keypath: '1主题色',
            color: activeColor,
          },
          {
            keypath: '2主题色',
            color: activeColor,
          },
          {
            keypath: '3主题色',
            color: activeColor,
          },
          {
            keypath: '4主题色',
            color: activeColor,
          },
        ]}
      />
    </>
  );
};

export default React.memo(WiFiAnimation);
